<!--
 * @Author: zhang_gen_yuan
 * @Date: 2023-08-28 11:09:44
 * @LastEditTime: 2023-08-28 11:10:55
 * @Descripttion: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="perspective">
        <!--wrap start-->
        <div id='wrap'>
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F8d09a542-92f3-434e-8dea-f0c3364c62c9%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695784242&t=4bcc07af399d659f92bc8272a3cc3c5e" width="133" height="200" alt="#" />
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F8d09a542-92f3-434e-8dea-f0c3364c62c9%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695784242&t=4bcc07af399d659f92bc8272a3cc3c5e" width="133" height="200" alt="#" />
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F8d09a542-92f3-434e-8dea-f0c3364c62c9%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695784242&t=4bcc07af399d659f92bc8272a3cc3c5e" width="133" height="200" alt="#" />
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F8d09a542-92f3-434e-8dea-f0c3364c62c9%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695784242&t=4bcc07af399d659f92bc8272a3cc3c5e" width="133" height="200" alt="#" />
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F8d09a542-92f3-434e-8dea-f0c3364c62c9%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695784242&t=4bcc07af399d659f92bc8272a3cc3c5e" width="133" height="200" alt="#" />
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F8d09a542-92f3-434e-8dea-f0c3364c62c9%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695784242&t=4bcc07af399d659f92bc8272a3cc3c5e" width="133" height="200" alt="#" />
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F8d09a542-92f3-434e-8dea-f0c3364c62c9%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695784242&t=4bcc07af399d659f92bc8272a3cc3c5e" width="133" height="200" alt="#" />
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F8d09a542-92f3-434e-8dea-f0c3364c62c9%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695784242&t=4bcc07af399d659f92bc8272a3cc3c5e" width="133" height="200" alt="#" />
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F8d09a542-92f3-434e-8dea-f0c3364c62c9%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695784242&t=4bcc07af399d659f92bc8272a3cc3c5e" width="133" height="200" alt="#" />
            <p></p>
        </div>
        <!--wrap end-->
    </div>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #222;
            overflow: hidden;
        }

        #perspective {
            perspective: 800px;
        }

        #wrap {
            width: 120px;
            /*133:200  4:6  */
            height: 180px;
            margin: 0 auto;
            position: relative;
            /*搭建3D效果必须的两个属性：一个变换风格变3d，一个场景景深800px*/
            transform-style: preserve-3d;
            transform: rotateX(-10deg) rotateY(0deg);
        }

        #wrap img {
            width: 100%;
            height: 100%;
            position: absolute;
            box-shadow: 0 0 8px #000000;
            transform: rotateY(0deg) translateZ(0px);
            /*倒影：朝向 偏移 遮盖*/
            /*线性渐变(从哪里开始,开始时候的颜色,结束时候的颜色)*/
            -webkit-box-reflect: below 5px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5) 100%);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }

        #wrap p {
            width: 1200px;
            height: 1200px;
            background: -webkit-radial-gradient(center center, 600px 600px, rgba(122, 122, 124, 0.2), rgba(0, 0, 0, 0));
            border-radius: 100%;
            position: absolute;
            left: 50%;
            top: 102%;
            margin-left: -600px;
            margin-top: -600px;
            transform: rotateX(90deg);
        }
    </style>
    <script>
        window.onload = function () {
            var oWrap = document.getElementById('wrap');
            var oImg = oWrap.getElementsByTagName('img');
            var oImgLength = oImg.length;
            var Deg = 360 / oImgLength;
            var nowX, nowY, lastX, lastY, minusX = 0,
                minusY = 0;
            var roY = 0,
                roX = -10;
            var timer;
            for (var i = 0; i < oImgLength; i++) {
                oImg[i].style.transform = 'rotateY(' + i * Deg + 'deg) translateZ(350px)';
                oImg[i].style.transition = 'transform 1s ' + (oImgLength - 1 - i) * 0.1 + 's';

            }
            mTop();
            window.onresize = mTop;

            function mTop() {
                var wH = document.documentElement.clientHeight;
                oWrap.style.marginTop = wH / 2 - 180 + 'px';
            }
            // 拖拽：三个事件-按下 移动 抬起
            //按下
            document.onmousedown = function (ev) {
                ev = ev || window.event;
                //鼠标按下的时候，给前一点坐标赋值，为了避免第一次相减的时候出错
                lastX = ev.clientX;
                lastY = ev.clientY;
                //移动
                this.onmousemove = function (ev) {
                    ev = ev || window.event;
                    clearInterval(timer);
                    nowX = ev.clientX; // clientX 鼠标距离页面左边的距离
                    nowY = ev.clientY; // clientY ………………………………顶部………………
                    //当前坐标和前一点坐标差值
                    minusX = nowX - lastX;
                    minusY = nowY - lastY;
                    //更新wrap的旋转角度，拖拽越快-> minus变化大 -> roY变化大 -> 旋转快
                    roY += minusX * 0.2; // roY = roY + minusX*0.2;
                    roX -= minusY * 0.1;
                    oWrap.style.transform = 'rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)';
                    //前一点的坐标
                    lastX = nowX;
                    lastY = nowY;
                }
                //抬起
                this.onmouseup = function () {
                    this.onmousemove = null;
                    timer = setInterval(function () {
                        minusX *= 0.95;
                        minusY *= 0.95;
                        roY += minusX * 0.2; // roY = roY + minusX*0.2;
                        roX -= minusY * 0.1;
                        oWrap.style.transform = 'rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)';
                        if (Math.abs(minusX) < 0.1 && Math.abs(minusY) < 0.1) { clearInterval(timer); }
                    }, 13);
                }
                return false;
            }
        }

    </script>
</body>

</html>